// import SockJS from "sockjs-client/dist/sockjs.min.js";
import { Tabs, Sticky, Toast } from "@arco-design/mobile-react";
import { useState } from "react";
import { decrement, increment } from "../../store/modules/counterStore";
import { useSelector, useDispatch } from "react-redux";

function TabsDemo() {
  const tabData = [{ title: "Example 1" }, { title: "Example 2" }];
  const [tabIndex, setTabIndex] = useState(0);
  return (
    <Tabs
      tabs={tabData}
      lazyloadCount={1}
      tabBarPadding={22}
      defaultActiveTab={tabIndex}
      tabBarArrange="center"
      tabBarHasDivider={false}
      onAfterChange={(tab, index) => {
        console.log("[tabs]", tab, index);
        setTabIndex(index);
      }}
      onTabBarOverflowChange={(o) => console.log("overflow", o)}
      renderTabBar={(TabBar) => <Sticky topOffset={44}>{TabBar}</Sticky>}
      onTabClick={(tab) => {
        Toast.info({
          content: tab.title,
          duration: 1000,
        });
      }}
    >
      <div className="demo-tab-content">Content area1{tabIndex}</div>
      <div className="demo-tab-content">Content area2{tabIndex}</div>
    </Tabs>
  );
}
function WebSocket() {
 

}
// import { Button } from 'antd';
import { Button } from "@arco-design/mobile-react";
export default function Home() {
  // 使用 store 中的数据
  const { count } = useSelector((state) => state.counter);
  // // 获取dispatch函数来分发actions
  const dispatch = useDispatch();
  return (
    <div>
      <h3>My</h3>
      <Button needActive onClick={WebSocket}>点击使用websocket</Button>

      <TabsDemo />

      {/* DONE 调用 dispatch 函数提交 action */}
      {/* dispatch函数需要的参数是 action 对象，action对象是通过 decrement / increment （actionCreate）方法得到的 */}
      {/* decrement / increment 方法一定要执行，只有执行了才能得到 action 对象 */}
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(increment())}>+</button>
      <p>{count}</p>
      <Button needActive>Primary</Button>
    </div>
  );
}
